<template>
  <div>
    <!-- 自定义弹窗 -->
    <div v-if="visible" class="custom-dialog">
      <!-- <div class="dialog-backdrop" @click="closeDialog"></div> 点击背景关闭弹窗 -->

      <div class="dialog-container-ljl  ">
        <!-- <div class="dialog-header-ljl ">
        
          <img src="../assets/modul1.2/SketchPng26505d59e150617f0b34239825c581f5e252d1a01d3d1248137c55940dc1da99.png" alt="logo" class="alert_icon"/>
            <slot name="header">
              <h3 class="dialog-title-ljl">{{ row.title }}</h3> 
            </slot>
          <img src="../assets/modul1.2/SketchPnge98c6bf1fe552f69e9323b59eaf92d6bef1bbd085f1b8cecefc968590eb3010d.png" alt="logo" class="alert_stripe"/>
         
        </div> -->
        <div class="header-content"> <img class="header-icon" referrerpolicy="no-referrer"
            src="@/assets/img/module1/page1top2.png" />
          <span class="header-title">{{ row.title }}</span>
        </div>

        <div class="dialog-content-ljl ">
          <!-- 左半部分 -->
          <div class="left-ljl ">
            <div class="left_1-ljl">
              <!-- <tablelin :tableData="tabledata2" :selectedRow="selectedRow1" @row-click="handleRowClick">
              </tablelin>  -->
              <div class = "left_1_1">
                <!-- <div class="info2 "><span class="info21">信息类别:</span></div>
                <div class="info2_1 "><span class="info22">{{ row.informationCategory }}</span></div>
                <div class="info3 "><span class="info31">信息来源:</span></div>
                <div class="info3_1 "><span class="info32">{{ row.informationSource }}</span></div>
                <div class="info1 "><span class="info11">接收时间:</span></div>
                <div class="info1_1 "><span class="info12">{{ row.publicationTime }}</span></div> -->
                <div class="form-item">
                  <label for="category">信息类别</label>
                  <input id = "category" v-model = "row.informationCategory" type="text" readonly />  
                </div>
                <div class="form-item">
                  <label for="source">信息来源</label>
                  <input id = "source" v-model = "row.informationSource" type="text" readonly />  
                </div>
                <div class="form-item">
                  <label for="time">接收时间</label>
                  <input id = "time" v-model = "row.publicationTime" type="text" readonly />  
                </div>
            </div>
            </div>
            <div class="left_2-ljl">
                <img :src="imageurl" alt="示例图片"  style="width:90%; height: 90%;" @click="fetchUrlAndOpen" >
            </div>
          
          </div>
           <!-- 右半部分 -->
          <div class = "right-ljl ">

            <div class = "right_1-ljl ">
              
              <el-button type="primary" class = "anniu-ljl" @click="goBack">返回列表</el-button>
            

            </div>
            <div class="right_2-ljl ">
              <div class="right_2_1-ljl "><span class="text_1-ljl">使用规范</span></div>
              <div class="right_2_2-ljl ">
                <span v-if="!isEditing" class="text_2-ljl">{{ usingStandards }}</span>
                <!-- 编辑状态 -->
                <input v-if="isEditing" v-model="currentUsingStandards" class="input-style1"/>
              </div>
              
              <!-- <div class="right_2_2-ljl "><span class="text_2-ljl">{{usingStandards}}</span></div> -->
              
              
            </div>             
            <div class="right_3-ljl flex-row">
              <div class="right_3_1-ljl "><span class="text_3-ljl">约束信息</span></div>
              <div class="right_3_2-ljl">
                <span v-if="!isEditing" class="text_4-ljl">{{ constraintInformation }}</span>
                <!-- 编辑状态 -->
                <input v-if="isEditing" v-model="currentConstraintInformation" class="input-style2"/>
              </div>
              
              <!-- <div class="right_3_2-ljl"><span class="text_4-ljl">{{constraintInformation}}</span></div> -->
            </div>
            
            <div class="right_4-ljl">
              <div class="button-container">
                
                <button class="xiazaiButton" @click="xiazai"><span class="text_5-ljl">下载</span></button>
                <button class="shibieButton" @click="shibie"><span class="text_7-ljl">识别</span></button>
                <button class="bianjiButton" @click="bianji"><span class="text_7-ljl">编辑</span></button>
                <button class="baocunButton" @click="baocun"><span class="text_6-ljl">保存</span></button>
                
              </div>
           </div>
          </div>
       </div> 
          

        </div>

        
      </div>
    </div>
  <!-- </div> -->
</template>

<script>
import Tablelin from '@/components/Table-lin.vue';
import { number } from 'echarts';
import axios from 'axios';
export default {
  components: {
   
    Tablelin
  },
  data(){
    return {
      tabledata2:[],
      selectedRow1: null, // 当前选中的行数据
      currentUsingStandards: this.usingStandards, // 初始化显示的内容
      currentConstraintInformation: this.constraintInformation, // 初始化显示的内容
      title2: "",
      currentPage: 1, // 当前页
      pageSize: 10, // 每页显示条数
      informationData:[],
      isEditing: false, // 控制是否处于编辑状态
      usingStandards: '', // 使用规范内容
      constraintInformation: '', // 约束条件
      imageurl: "",
      pdfurl: "",
    }
  },

  props: {
    tabledata:{
      type: [Array, Object], // 允许数组或对象类型
      required: true
    },
    visible: {
      type: Boolean,
      required: true,
    },
    title: {
      type: String,
      default: "", // 弹窗默认标题
    },
    selectedrow:{
      type: [Object,Number,String],
      default:null,
    },
    closeButtonText: {
      type: String,
      default: "关闭", // 关闭按钮默认文本
    },
    row:{
      type: [Array, Object,String], // 允许数组或对象类型
      required: true
    }
    // usingStandards: {
    //   type: String,
    //   default: "", // 弹窗默认标题
    // },
    // constraintInformation: {
    //   type:String,
    //   default: "", // 弹窗默认标题
    // },
    
  },

  watch: {
    tabledata: {
            handler(newVal, oldVal) {
                // 当 tableData1 更新时，可以在这里执行一些操作
                this.tabledata2 = this.tabledata;
                
                
                console.log('弹窗组件的abledata 更新了:', newVal);
            },
            deep: true
        },
        selectedrow: {
        async handler(newVal, oldVal) {
        // 当 selectedrow 更新时，可以在这里执行一些操作
        // console.log("弹窗组件接受到的选中行:", this.selectedrow);
        // this.selectedRow1 = this.selectedrow;
        // console.log('传给表格的selectedRow1:', this.selectedRow1);

        if (this.selectedrow) {
          try {
            const informationData = await this.fetchInformation(this.selectedrow);
            console.log('信息数据:', informationData);
            if (informationData.usingStandards === "" && informationData.constraintInformation === "") {
              this.usingStandards = "未获取到数据，请先进行识别";
              this.constraintInformation = "未获取到数据，请先进行识别";
            } 
            else {
            this.usingStandards = informationData.usingStandards;
            this.constraintInformation = informationData.constraintInformation;}
            this.imageurl = informationData.imageUrl;
            this.pdfurl = informationData.pdfUrl;
            console.log('pdf链接:', this.pdfurl);
            console.log('使用规范:', this.usingStandards);
            console.log('约束信息:', this.constraintInformation);
            console.log('照片链接:', this.imageurl);
            
          } catch (error) {
            console.error('Error fetching information in watch:', error);
          }
        }
      },
      deep: true
    },
        title: {
          handler(newVal, oldVal) {
             console.log('弹窗组件接收到的新标题:', newVal);
             this.title2 = this.title;
          },
          deep: true
        },
  },
    
  
  created() {
        
        console.log("弹窗组件接受到的选中行:",this.selectedrow);
        
    },
  mounted() {
      // console.log('弹窗组件收到父组件传来的id:', this.selectedrow); 
      // const informationData = this.fetchInformation(this.selectedrow);
      // console.log('信息数据:', informationData); 
      // this.usingStandards = informationData.usingStandards;
      // this.constraintInformation = informationData.constraintInformation;
  
     

    },
  methods: {
    async fetchInformation(id) {
    try {
      const response = await axios.post('http://47.99.75.194:8081/admin/airspaceNormsAndConstraints/getById',{
       
        id:id
      

      });
      return response.data.data; // 返回获取的数据
    } catch (error) {
      console.error('Error fetching information:', error);
    }
  },
  async shibieInformation(id) {
    try {
      const response = await axios.post('http://47.99.75.194:8081/admin/airspaceNormsAndConstraints/informationExtraction',{
        id:id,

      });
      return response.data.data; // 返回获取的数据
    } catch (error) {
      console.error('Error fetching information:', error);
    }
  },
  async fetchUrlAndOpen() {
  try {
    const url = this.pdfurl; // 使用 this.pdfurl
    console.log('pdf链接:', url);

    if (url) {
      // 使用 axios 发送 GET 请求，并设置 responseType 为 'blob'
      const response = await axios({
        method: 'get',
        url: url,
        responseType: 'blob',
        headers: {
          'Content-Disposition': 'inline',
          'Content-Type': 'application/pdf' // 确保 Content-Type 设置为 application/pdf
        }
      });

      // 创建一个 Blob URL
      const blobUrl = URL.createObjectURL(response.data);
      // 在新窗口中打开 PDF
      window.open(blobUrl, '_blank');
    } else {
      console.error('未能获取到有效的 URL');
      alert('未能获取到有效的 URL');
    }
  } catch (error) {
    console.error('获取 URL 时发生错误:', error);
    alert('获取 URL 失败，请稍后再试。');
  }
},
   
     
    // },
 
    xiazai(){
      console.log('下载操作');
    },
 
    async shibie(){
      const informationData = await this.shibieInformation(this.selectedrow);
      console.log('信息数据:', informationData);
      this.usingStandards = informationData.usingStandards;
      this.constraintInformation = informationData.constraintInformation;
    },

    goBack(){
      this.$emit('update:visible', false);              
    },
    closeDialog(){
      this.$emit('update:visible', false);              
    },
    bianji() {
    this.isEditing = true;
    // 将当前内容赋值给编辑状态的变量
    this.currentUsingStandards = this.usingStandards;
    this.currentConstraintInformation = this.constraintInformation;
  },
  async baocun() {
    this.isEditing = false; // 退出编辑模式

    // 将编辑后的数据保存到展示变量
    this.usingStandards = this.currentUsingStandards;
    this.constraintInformation = this.currentConstraintInformation;

    // 发送请求到后端保存数据
    const editedData = {  
      id : this.selectedrow,
      usingStandards: this.usingStandards,
      constraintInformation: this.constraintInformation,
    };

    try {
      // 假设后端接口为 'http://your-backend-api/save'
      const response = await axios.post('http://47.99.75.194:8081/admin/airspaceNormsAndConstraints/informationSave', editedData);
      console.log('保存成功:', response.data);
    } catch (error) {
      console.error('保存失败:', error);
    }
  },
   
  }
};
</script>

<style scoped>


/* 弹窗容器 */
.dialog-container-ljl {
  /* position: relative; */
  /* width: 100%; 弹窗宽度 */
  /* height: 100%; */
  /* background-image: '../assets/modul1.2/SketchPng887da9c96099665db139d378e7d937efcec9b7d473a81b4163c40eed1a41a833'; 背景图片 */
  /* background-size: cover;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); 阴影效果
  display: flex;
  flex-direction: column;
  justify-content: space-between; */
  /* width: 100%;
  height: 100%; */
  display: flex;
  flex-direction: column;
}
.header-content {
  position: relative;
  width: 100%;
  /* 使其占据整个宽度 */
  /* height: 10%; */
  background: url("@/assets/img/module1/page1top.png") no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  /* 垂直居中 */
  /* padding: 5px; */
  /* 增加内部间距 */
}
/* 标题样式 */
.header-title {
  background-image: linear-gradient(180deg, rgba(200, 215, 228, 1) 0, rgba(255, 255, 255, 1) 100%);
  position: relative;
  flex: 2;
  margin-left: 5%;
  width: 20%;
  height: 20%;
  color: rgba(112, 112, 112, 1);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  font-family: PangMenZhengDao-3;
  text-align: left;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* 图标样式 */
.header-icon {
  position: relative;
  width: 22px;
  height: 20px;
  margin-left: 20px;
  /* 与其他内容间隔 */
  margin-top: -20px;
}
.dialog-title-ljl{
  margin-left: 0%;
}

/* 弹窗顶部标题和按钮 */
.dialog-header-ljl {
  /* display: flex;
  justify-content: space-between;
  align-items: center; */
  flex-direction: row;
  /* flex:10%; */
  height: 5%;
  width:100%;
  position: relative;  /*元素的定位方式为相对定位，这允许元素相对于其正常位置进行偏移。*/
  display: flex; /*弹性盒子*/
  align-items: center;  /*弹性盒子容器中，垂直居中对齐子元素。*/
  justify-content: flex-start;
  padding-left: 2%;  /*元素左侧内边距为 2%，增加左侧的空间。*/
  gap: 4%;  /*弹性盒子容器内的子元素之间设置 2% 的间距。*/

  background: url("@/assets/modul1.2/SketchPng9a3840ec9a1e44cb90b8cc0d22f86217e9bd2dd719c9cad7bfacd8322b4b85d6.png");
  background-repeat: no-repeat;  /*背景图像不会重复显示。*/
  background-position: 0% 50%;
}
.alert_stripe {
  display:flex;
  position: absolute;
  right:1%;
}



/* 弹窗内容区 */
.dialog-content-ljl {
  flex-direction: row;
  height: 95%;
  /* height: 80vh; */
  width:100%;
  /* flex:90%; */
  display: flex;
  background:  url("@/assets/modul1.2/SketchPng887da9c96099665db139d378e7d937efcec9b7d473a81b4163c40eed1a41a833.png");
  
}
.left-ljl{
  flex-direction: column;
  flex:20%;
  box-shadow: inset 0px 0px 6px 0px rgba(73, 172, 207, 1);
  background-color: rgba(0, 16, 29, 0.5);
  border-radius: 8px;
  /* width: 280px;
  height: 80%; */
  height: 76vh;
  border: 1px solid #000;
  margin: 1rem 0 1rem 1.5rem;
  display: flex;
  flex-direction: column;
}
.left_1-ljl{
  height:40%;
  border: 1px solid #000;
  box-shadow: inset 0px 0px 1px 0px rgba(73, 172, 207, 1);
  margin:1.5rem 2.5rem 0 2.5rem;
  display:flex;
  flex-direction: column;
  
}
.left_1_1{
  margin:0.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;

}
.form-item {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  margin-bottom: 0.5rem;
}
label {
  width: 10vw;
  /* font-weight: bold; */
  text-align: left;
  margin-right: 1vw;
  margin-bottom: 0.5rem;
  margin-top:0.5rem;
}
input {
  flex: 1;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #cccccc18;
  border-radius: 4px;
  background-color: #cccccc18;
  color: gray;
}
.info1{
  flex:10%;
  margin-top:1rem;
}
.info1_1{
  flex:10%;
  border: 1px solid #000;
  transition: background-color 0.3s ease;
  background-image: url("@/assets/img/module4/part1/table3.png");
  background-size: cover;
  margin-top:0.2rem;
  margin-bottom: 0.2rem;
}
.info2{
  flex:10%;
  margin-top:0.5rem;
}
.info2_1{
  flex:10%;
  border: 1px solid #000;
  transition: background-color 0.3s ease;
  background-image: url("@/assets/img/module4/part1/table3.png");
  background-size: cover;
  margin-top:0.2rem;
}
.info3{
  flex:10%;
  margin-top:1rem;
}
.info3_1{
  flex:10%;
  border: 1px solid #000;
  transition: background-color 0.3s ease;
  background-image: url("@/assets/img/module4/part1/table3.png");
  background-size: cover;
  margin-top:0.2rem;
}

.left_2-ljl{
  display: flex;
  height:60%;
  margin:1rem 1rem 2rem 1rem;
  border: 1px solid #000;
  box-shadow: inset 0px 0px 1px 0px rgba(73, 172, 207, 1);
  cursor: pointer; /* 显示为手型，表示可以点击 */
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
}
.right-ljl{
  flex:80%;
  flex-direction: column;
  display: flex;
}
.right_1-ljl{
  flex: 0%;
  display: flex;
  justify-content: flex-end; /* 将子元素对齐到右侧 */
  margin: 1rem 2.5rem; 
}
.anniu-ljl{
  padding-right: 10px;
}
.right_2-ljl{
  
  display: flex;
  flex-direction: row;;
  flex:40%;
  margin: 0.5rem 2.5rem 0.5rem 2.5rem;
}
.right_2_1-ljl{
  /* flex-direction: row; */
  display: flex;
  width:8%;
  justify-content: flex-end;
}
.right_2_2-ljl{
  /* flex-direction: row; */
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  border: 1px solid #000;
  width:92%;
}
.text_1-ljl{
  /* font-size: 1vw; 字体大小为 0.72 个视口宽度单位 (vw)，相当于视口宽度的 0.72% */
  font-family: AlibabaPuHuiTi_2_55_Regular;
  margin: 0.31vw 0.5vw 0 0
}
.text_2-ljl{
  /* font-size: 1vw; 字体大小为 0.72 个视口宽度单位 (vw)，相当于视口宽度的 0.72% */
  font-family: AlibabaPuHuiTi_2_55_Regular;
  margin: 0.31vw 0 0 1.09vw
}
/* .input-style1::placeholder {
  color: white !important;
  opacity: 1;
}
.input-style2::placeholder {
  color: white !important;
  opacity: 1;
} */
.input-style1{
 
  border: none; /* 移除边框 */
  background-color: transparent; /* 设置背景透明 */
  box-shadow: none; /* 移除阴影 */
  color: #fff; /* 设置字体颜色，与非编辑状态一致 */
  padding: 0; /* 调整内边距（如有需要） */
  font-size: 1vw; /* 确保字体大小一致 */
  width: 100%; /* 使输入框宽度适应容器 */
  /* height:20%; */
  box-sizing: border-box; /* 确保内边距和边框不会影响宽度 */
  /* margin: 0.31vw 0.5vw 0 0 */
}
.input-style2{
  
  border: none; /* 移除边框 */
  background-color: transparent; /* 设置背景透明 */
  box-shadow: none; /* 移除阴影 */
  color: #fff; /* 设置字体颜色，与非编辑状态一致 */
  padding: 0; /* 调整内边距（如有需要） */
  font-size: 1vw; /* 确保字体大小一致 */
  width: 100%; /* 使输入框宽度适应容器 */
  /* height:20%; */
  box-sizing: border-box; /* 确保内边距和边框不会影响宽度 */
  /* margin: 0.31vw 0.5vw 0 0 */
}

.right_3-ljl{
 
  flex:40%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin: 0.5rem 2.5rem 0.5rem 2.5rem;

}
.right_3_1-ljl{
  /* flex-direction: row; */
  width:8%;
  display:flex;
  justify-content: flex-end;

  
}
.right_3_2-ljl{
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  border: 1px solid #000;
  width:92%;
  display: inline-block
}
.text_3-ljl{
  /* font-size: 1vw; 字体大小为 0.72 个视口宽度单位 (vw)，相当于视口宽度的 0.72% */
  font-family: AlibabaPuHuiTi_2_55_Regular;
  margin: 0.31vw 0.5vw 0 0
}
.text_4-ljl{
  /* font-size: 1vw; 字体大小为 0.72 个视口宽度单位 (vw)，相当于视口宽度的 0.72% */
  font-family: AlibabaPuHuiTi_2_55_Regular;
  margin: 0.31vw 0 0 1.09vw
}
.right_4-ljl{
  flex:20%;
  display: flex;           /* 使用 Flexbox 布局 */
  justify-content: flex-end; /* 将内容推到右边 */
  padding: 10px;         /* 添加一些内边距 */
  margin: 0.5rem 2.5rem 0.5rem 2.5rem;
}
.button-container{
  display: flex;          /* 使用 Flexbox 布局来排列按钮 */
  flex-direction: row;
  gap: 10px; 
  height: 30%;            /* 设置按钮之间的间隔 */
  justify-content: flex-end;  
  justify-content: flex-end; 
  margin-top: 5rem;
  margin-right: 2vh;
}

.xiazaiButton,
.baocunButton,
.shibieButton,
.bianjiButton {
    display: flex;          /* 使用 Flexbox 布局来排列按钮 */
    flex-direction: row;
    background: url("@/assets/modul1.2/SketchPng2430e3f669dc1d7f487d7bd50d8fdbe43c3c1695838735b038b7efb6427adeb6.png");
    background-size: 100% 100%;
    padding: 10px 20px;    /* 添加按钮内边距 */
    border: none;           /* 去掉默认边框 */
    border-radius: 5px;     /* 添加圆角 */
    cursor: pointer;        /* 鼠标悬停时显示为手形 */
    display: flex;          /* 让按钮内容也使用 Flexbox */
    align-items: center;    /* 垂直居中按钮内容 */
   
}
.text_5-ljl{

  background: url("@/assets/modul1.2/SketchPnga180aec1ee29093c281cd765681df6998c4b7f6bcbfcce24ae96ce81c43efcaa.png");
  background-size: 100% 100%;
  text-shadow: inset 0px 0px 5px rgba(233, 251, 255, 0.43);
  background-image: linear-gradient(
    181deg,
    rgba(141, 219, 255, 1) 0,
    rgba(88, 235, 255, 1) 42.056381%,
    rgba(95, 169, 255, 1) 100%
  );
  color: rgba(112, 112, 112, 1);
  font-size: 16px;
  letter-spacing: 0.800000011920929px;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text_6-ljl{
  background: url("@/assets/modul1.2/SketchPnga180aec1ee29093c281cd765681df6998c4b7f6bcbfcce24ae96ce81c43efcaa.png");
  background-size: 100% 100%;
  text-shadow: inset 0px 0px 5px rgba(233,251, 255, 0.43);
  background-image: linear-gradient(
    181deg,
    rgba(141, 219, 255, 1) 0,
    rgba(88, 235, 255, 1) 42.056381%,
    rgba(95, 169, 255, 1) 100%
  );
  color: rgba(112, 112, 112, 1);
  font-size: 16px;
  letter-spacing: 0.800000011920929px;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text_7-ljl{
  background: url("@/assets/modul1.2/SketchPnga180aec1ee29093c281cd765681df6998c4b7f6bcbfcce24ae96ce81c43efcaa.png");
  background-size: 100% 100%;
  text-shadow: inset 0px 0px 5px rgba(233,251, 255, 0.43);
  background-image: linear-gradient(
    181deg,
    rgba(141, 219, 255, 1) 0,
    rgba(88, 235, 255, 1) 42.056381%,
    rgba(95, 169, 255, 1) 100%
  );
  color: rgba(112, 112, 112, 1);
  font-size: 16px;
  letter-spacing: 0.800000011920929px;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}
/* 弹窗底部按钮 */
/* .dialog-footer {
  display: flex;
  /* justify-content: flex-end; */
  /* gap: 10px;
} */ 

/* .dialog-footer button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
} */
/* .dialog-footer {
  display: flex;
  justify-content: center; /* Ensure buttons are centered */
  /* gap: 20px; Space between buttons
  margin-top: 20px;
} */ 

.dialog-footer button:hover {
  background-color: #0056b3;
}
</style>
